<!--
 * @Author: your name
 * @Date: 2021-07-04 09:59:45
 * @LastEditTime: 2021-07-04 15:54:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuecli-demo\src\components\TodoFooter.vue
-->
<template>
  <footer class="footer">
				<!-- This should be `0 items left` by default -->
				<span class="todo-count"><strong>{{unDoneTodoLength}}</strong> item left</span>
				<!-- Remove this if you don't implement routing -->
				<ul class="filters" @click="$emit('switch-todo',type)">
					<li>
						<a  
                            href="#/"
                            :class="{selected : type === 'all'}"
                            @click="type = 'all'">All</a>
					</li>
					<li>
						<a 
                            href="#/active"
                            :class="{selected : type === 'no'}"
                            @click="type = 'no'">>Active</a>
					</li>
					<li>
						<a 
                            href="#/completed"
                            :class="{selected : type === 'yes'}"
                            @click="type = 'yes'">>Completed</a>
					</li>    
				</ul>
				<!-- Hidden if no completed items are left ↓ -->
				<button class="clear-completed" v-if="hasDoneTodo" @click="clearFn">Clear completed</button>
			</footer>
</template>

<script>
export default {
    data () {
        return {
            type:'all'
        }
    },
    props: ['arr'],
    computed: {
        unDoneTodoLength(){
            return this.arr.filter(item => item.isDone === false).length  
        },
        hasDoneTodo(){
            return this.arr.some(item => item.isDone === true)
        }
    },
    methods: {
        clearFn(){
            if (window.confirm('确认要清空已完成吗？')) {
                this.$emit('clear-todo')
            }
        }
    }
}
</script>

<style>

</style>